<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>注册成为网站用户</title>

    <!-- 自定义字体 -->
    <link th:href="@{/vendor/fontawesome-free/css/all.min.css}" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">

    <!-- 表格界面的主要css -->
    <link th:href="@{/css/sb-admin-2.css}" rel="stylesheet">
    <!-- Core theme CSS (包括 Bootstrap)-->
<!--    <link th:href="@{/css/styles.css}" rel="stylesheet" />-->
    <link th:href="@{/css/myWeb-min.css}" rel="stylesheet">
    <!-- 表格bootstrap -->
    <link th:href="@{/vendor/datatables/dataTables.bootstrap4.min.css}" rel="stylesheet">

</head>

<body class="bg-gradient-primary">

    <div class="container">

        <div class="card o-hidden border-0 shadow-lg my-5">
            <div class="card-body p-0">
                <!-- Nested Row within Card Body -->
                <div class="row">
                    <div class="col-lg-5 d-none d-lg-block bg-register-image"></div>
<!--                    <div class="col-lg-7">-->
<!--                        <div class="p-5">-->
<!--                            <div class="text-center">-->
<!--                                <h1 class="h4 text-gray-900 mb-4">注册账户</h1>-->
<!--                            </div>-->
<!--                            <form action="/userRegister" method="post">-->
<!--                                <input type="hidden" name="id" th:if="${user}" th:value="${user.id}"/>-->
<!--                                <div class="layui-form-item">-->
<!--                                    <label class="layui-form-label required">用户名</label>-->
<!--                                    <div class="layui-input-inline">-->
<!--                                        <input class="layui-input" type="text" name="username"  placeholder="请输入用户名" th:value="${user?.username}">-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                                <div class="form-group row">-->
<!--                                    <label class="layui-form-label required">用户昵称</label>-->
<!--                                    <div class="col-sm-6 mb-3 mb-sm-0">-->
<!--                                        <input class="form-control form-control-user" type="text" name="nickname" placeholder="请输入用户昵称" th:value="${user?.nickname}">-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                                <div class="layui-form-item">-->
<!--                                    <label class="layui-form-label required">用户密码</label>-->
<!--                                    <div class="layui-input-inline">-->
<!--                                        <input class="layui-input" type="password" name="password" placeholder="请输入用户密码">-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                                <div class="layui-form-item">-->
<!--                                    <label class="layui-form-label required">确认密码</label>-->
<!--                                    <div class="layui-input-inline">-->
<!--                                        <input class="layui-input" type="password" name="confirm" placeholder="再一次输入密码">-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                                <div class="layui-form-item hide" type="hidden">-->
<!--                                    <label class="layui-form-label required">所在部门</label>-->
<!--                                    <div class="layui-input-inline">-->
<!--                                        <input class="layui-input select-tree"-->
<!--                                               type="text" name="dept"  placeholder="请选择所在部门" th:value="6">-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                                <div class="layui-form-item">-->
<!--                                    <label class="layui-form-label">电话号码</label>-->
<!--                                    <div class="layui-input-inline">-->
<!--                                        <input class="layui-input" type="text" name="phone" placeholder="请输入电话号码" th:value="${user?.phone}">-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                                <div class="layui-form-item">-->
<!--                                    <label class="layui-form-label">邮箱</label>-->
<!--                                    <div class="layui-input-inline">-->
<!--                                        <input class="layui-input" type="text" name="email" placeholder="请输入邮箱" th:value="${user?.email}">-->
<!--                                    </div>-->
<!--                                </div>-->

<!--                                <div class="layui-form-item">-->
<!--                                    <label class="layui-form-label">选择性别</label>-->
<!--                                    <div class="layui-input-inline">-->
<!--                                        <input type="radio" name="sex" value="1" title="男" checked><div class="layui-unselect layui-form-radio layui-form-radioed"><i class="layui-anim layui-icon"></i><div>男</div></div>-->
<!--                                        <input type="radio" name="sex" value="2" title="女" th:checked="${user?.sex} eq 2"><div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i><div>女</div></div>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                                <div class="layui-form-item layui-form-text">-->
<!--                                    <label class="layui-form-label">备注</label>-->
<!--                                    <div class="layui-input-block">-->
<!--                                        <textarea placeholder="请输入内容" class="layui-textarea" name="remark">[[${user?.remark}]]</textarea>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                                <div class="layui-form-item timo-finally">-->
<!--                                    <button class="btn btn-primary" type="submit"><i class="fa fa-check-circle"></i> 保存</button>-->
<!--                                    <button class="layui-btn btn-secondary close-popup"><i class="fa fa-times-circle"></i> 关闭</button>-->
<!--                                </div>-->
<!--                            </form>-->



<!--&lt;!&ndash;                            注册表单&ndash;&gt;-->
<!--&lt;!&ndash;                            <form class="user"  th:action="@{/system/user/save}">&ndash;&gt;-->
<!--&lt;!&ndash;                                <div class="form-group row">&ndash;&gt;-->
<!--&lt;!&ndash;                                    <div class="col-sm-6 mb-3 mb-sm-0">&ndash;&gt;-->
<!--&lt;!&ndash;                                        <input type="text" class="form-control form-control-user" id="exampleFirstName"&ndash;&gt;-->
<!--&lt;!&ndash;                                               name="username" required&ndash;&gt;-->
<!--&lt;!&ndash;                                            placeholder="登录账户名">&ndash;&gt;-->
<!--&lt;!&ndash;                                    </div>&ndash;&gt;-->
<!--&lt;!&ndash;                                    <div class="col-sm-6">&ndash;&gt;-->
<!--&lt;!&ndash;                                        <input type="text" class="form-control form-control-user" id="exampleLastName"&ndash;&gt;-->
<!--&lt;!&ndash;                                               name="nickname"&ndash;&gt;-->
<!--&lt;!&ndash;                                            placeholder="笔名">&ndash;&gt;-->
<!--&lt;!&ndash;                                    </div>&ndash;&gt;-->
<!--&lt;!&ndash;                                </div>&ndash;&gt;-->
<!--&lt;!&ndash;                                <div class="form-group">&ndash;&gt;-->
<!--&lt;!&ndash;                                    <input type="email" class="form-control form-control-user" id="exampleInputEmail"&ndash;&gt;-->
<!--&lt;!&ndash;                                        placeholder="Email Address">&ndash;&gt;-->
<!--&lt;!&ndash;                                </div>&ndash;&gt;-->
<!--&lt;!&ndash;                                <div class="form-group row">&ndash;&gt;-->
<!--&lt;!&ndash;                                    <div class="col-sm-6 mb-3 mb-sm-0">&ndash;&gt;-->
<!--&lt;!&ndash;                                        <input type="password" class="form-control form-control-user"&ndash;&gt;-->
<!--&lt;!&ndash;                                            id="exampleInputPassword" placeholder="Password">&ndash;&gt;-->
<!--&lt;!&ndash;                                    </div>&ndash;&gt;-->
<!--&lt;!&ndash;                                    <div class="col-sm-6">&ndash;&gt;-->
<!--&lt;!&ndash;                                        <input type="password" class="form-control form-control-user"&ndash;&gt;-->
<!--&lt;!&ndash;                                            id="exampleRepeatPassword" placeholder="Repeat Password">&ndash;&gt;-->
<!--&lt;!&ndash;                                    </div>&ndash;&gt;-->
<!--&lt;!&ndash;                                </div>&ndash;&gt;-->
<!--&lt;!&ndash;                                <a href="login.html" class="btn btn-primary btn-user btn-block">&ndash;&gt;-->
<!--&lt;!&ndash;                                    Register Account&ndash;&gt;-->
<!--&lt;!&ndash;                                </a>&ndash;&gt;-->
<!--&lt;!&ndash;                                <hr>&ndash;&gt;-->
<!--&lt;!&ndash;                                <a href="index.html" class="btn btn-google btn-user btn-block">&ndash;&gt;-->
<!--&lt;!&ndash;                                    <i class="fab fa-google fa-fw"></i> Register with Google&ndash;&gt;-->
<!--&lt;!&ndash;                                </a>&ndash;&gt;-->
<!--&lt;!&ndash;                                <a href="index.html" class="btn btn-facebook btn-user btn-block">&ndash;&gt;-->
<!--&lt;!&ndash;                                    <i class="fab fa-facebook-f fa-fw"></i> Register with Facebook&ndash;&gt;-->
<!--&lt;!&ndash;                                </a>&ndash;&gt;-->
<!--&lt;!&ndash;                            </form>&ndash;&gt;-->
<!--                            <hr>-->
<!--                            <div class="text-center">-->
<!--                                <a class="small" href="forgot-password.html">Forgot Password?</a>-->
<!--                            </div>-->
<!--                            <div class="text-center">-->
<!--                                <a class="small" href="login.html">Already have an account? Login!</a>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
                    <div class="col-lg-7">
                        <div class="p-5">
                            <div class="text-center">
                                <h1 class="h4 text-gray-900 mb-4">欢迎注册成为读者出版社用户</h1>
                            </div>
                            <!--              表单在这里-->
                            <!--            <form class="user" method="post" th:action="@{/registerCheck}">-->
                            <form class="user" method="post" th:action="@{/userRegister}">
                                <div class="form-group row">
                                    <div class="col-sm-6 mb-3 mb-sm-0">
                                        <input type="text" name="username" class="form-control form-control-user"
                                               id="realName" placeholder="用户名" onblur="checkRealName();">
                                        <div id="realNameCheck" class="animated--grow-in btn btn-sm btn-danger d-none" style="border-radius: 20px;">您输入的用户名有误</div>
                                    </div>
                                    <div class="col-sm-6 mb-3 mb-sm-0">
                                        <input type="text" name="nickname" class="form-control form-control-user"
                                               id="nickname" placeholder="笔名">
                                    </div>

                                </div>

                                <div class="form-group row">
                                    <div class="col-sm-6 mb-3 mb-sm-0">
                                        <input type="email" name="email" class="form-control form-control-user"
                                               id="inputEmail" placeholder="电子邮箱" onblur="checkEmail();">
                                        <div id="emailCheck" class="animated--grow-in btn btn-sm btn-danger d-none" style="border-radius: 20px;">请输入正确的邮箱</div>
                                    </div>

                                    <div class="col-sm-6 mb-3 mb-sm-0" style="overflow: hidden;">
                                        <div class="form-control form-control-user">
                                            <div style="margin-top: -15px;" class="text-nowrap">
                                                请选择性别：
                                                <input class="" type="radio" checked="checked" name="gender"
                                                       value="1"/> <i class="fas fa-male fa-2x text-primary"></i>
                                                <input class="" type="radio" name="gender"
                                                       value="2"/> <i class="fas fa-female fa-2x text-danger"></i>
                                                <input class="" type="radio" name="gender"
                                                       value="0"/> <i class="fas fa-lock text-info" style="font-size: 16px;"> 保密</i>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-sm-3 mb-3 mb-sm-0 mt-3" style="overflow: hidden;">
                                        <input class="form-control form-control-user" id="inputCode" onblur="check();checkVerificationCode();" name="code" placeholder="验证码">
                                        <div id="verificationCodeCheck" class="animated--grow-in btn btn-sm btn-danger d-none" style="border-radius: 20px;">请填写邮箱中的验证码</div>
                                    </div>

                                    <div class="col-sm-9 mb-3 mb-sm-0 mt-3" style="overflow: hidden;">
                                        <button id="sendEmailBtn" class="btn btn-primary mt-1 d-block"
                                                style="border-radius: 20px;" type="button" onclick="get()">
                                            <small id="sendEmailIcon" class="ml-3 mr-1"><i class="fa fa-envelope"></i></small>
                                            <small id="returnMsg" class="mr-3">请先填写您的邮箱</small>
                                        </button>
                                        <!--                  <div id="returnMsg"></div>-->
                                    </div>


                                </div>

                                <div class="form-group mb-3 mb-sm-0">
                                    <div class="form-group">
                                        <input type="password" class="form-control form-control-user"
                                               id="inputPassword" placeholder="密码" name="password" onblur="checkPassword();">
                                        <div id="passwordCheck" class="animated--grow-in btn btn-sm btn-danger d-none" style="border-radius: 20px;">请输入正确的密码</div>
                                        <div id="passwordTestDiv" class="d-none">
                                            <small class="ml-3">密码强度：<small id="passwordStrong"></small>（密码只能包括大小写字母，特殊符号或者数字，并且至少6位）</small>
                                            <div class="progress progress-sm mb-2 ml-3" style="width: 90%;">
                                                <div id="passwordStrongBar" class="progress-bar bg-danger" role="progressbar" style="width: 0" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group mb-3 mb-sm-0">
                                        <input type="password" class="form-control form-control-user"
                                               id="repeatPassword" placeholder="重复输入密码" onblur="checkRepeatPassword()">
                                        <div id="repeatPasswordCheck" class="animated--grow-in btn btn-sm btn-danger d-none" style="border-radius: 20px;">两次输入的密码不对应</div>
                                    </div>
                                </div>

                                <button type="submit" class="btn btn-primary btn-user btn-block mt-4" id="registerBtn"
                                        onclick="return checkFormValidAll();">
                                    注册
                                </button>
<!--                                <hr>-->
<!--                                <a href="#" class="btn btn-google btn-user btn-block">-->
<!--                                    <i class="fab fa-weixin fa-fw"></i> 使用微信账号注册-->
<!--                                </a>-->
<!--                                <a href="#" class="btn btn-facebook btn-user btn-block">-->
<!--                                    <i class="fab fa-qq fa-fw"></i>使用QQ账号注册-->
<!--                                </a>-->
                            </form>
                            <!--              表单结束-->

                            <hr>
                            <div class="text-center">
                                <a class="small" href="forgotPassword">忘记密码？</a>
                            </div>
                            <div class="text-center">
                                <a class="small" href="login.html">已经有了账号？前去登录！</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <!-- Bootstrap core JavaScript-->
    <script th:src="@{/vendor/jquery/jquery.min.js}"></script>
    <script th:src="@{/vendor/bootstrap/js/bootstrap.bundle.min.js}"></script>

    <!-- Core plugin JavaScript-->
    <script th:src="@{/vendor/jquery-easing/jquery.easing.min.js}"></script>

    <!-- Custom scripts for all pages-->
    <script th:src="@{/js/sb-admin-2.js}"></script>

    <!-- Page level plugins -->
    <script th:src="@{/vendor/datatables/jquery.dataTables.min.js}"></script>
    <script th:src="@{/vendor/datatables/dataTables.bootstrap4.min.js}"></script>

    <!-- Page level custom scripts -->
    <script th:src="@{/js/demo/datatables-demo.js}"></script>
    <script th:src="@{/js/checkRegisterForm.js}"></script>
    <script type="text/javascript">
        $("#sendEmailBtn").attr({"disabled":"disabled"});
        $("#inputPassword").bind("input propertychange",function(event){
            $('#passwordTestDiv').addClass("d-block").removeClass("d-none");
            $('#passwordCheck').addClass("d-none").removeClass("d-block");
            let password = $('#inputPassword').val();
            if(strongPassword.test(password)){
                $('#passwordStrong').text("较强");
                $('#passwordStrongBar').css('width','75%').removeClass("bg-danger bg-warning").addClass("bg-success");
            }
            else if(ordinaryPassword.test(password)){
                $('#passwordStrong').text("中等");
                $('#passwordStrongBar').css('width','60%').removeClass("bg-success bg-danger").addClass("bg-warning");
            }
            else if(weekPassword.test(password)){
                $('#passwordStrong').text("较弱");
                $('#passwordStrongBar').css('width','30%').removeClass("bg-success bg-warning").addClass("bg-danger");
            }
        });
        let sendEmailLimited = 30;
        let countDownFun;
        let msg="";
        function get() {
            if(sendEmailLimited == 30){
                var email = $('#inputEmail').val();
                $.get("/email/sendEmailCode?email=" + email, function (data) {
                    console.log(data);
                    console.log(data.msg);
                    msg = data.msg;
                    if(msg!=="发送成功")
                        $("#returnMsg").html(msg);
                });
                if(msg!=="该邮箱已注册"||msg!=="未发送验证码"||msg!=="发送失败"){
                    $("#returnMsg").html("已发送("+sendEmailLimited+"秒后可再发送)");
                    countDownFun = setInterval(function (){
                        sendEmailLimited--;
                        $("#returnMsg").html("已发送（"+sendEmailLimited+"秒后可再发送）");
                        if(sendEmailLimited<=0){
                            clearInterval(countDownFun);
                            sendEmailLimited = 30;
                            $('#sendEmailBtn').removeClass("btn-info btn-success btn-danger").addClass("btn-primary");
                            $('#sendEmailIcon').html('<i class="fa fa-envelope"></i>');
                            $("#returnMsg").html("没有收到？重新发送");
                            $('#sendEmailBtn').removeAttr("disabled");
                        }
                    },1000);
                    $('#sendEmailBtn').removeClass("btn-primary btn-success btn-danger").addClass("btn-info");
                    $('#sendEmailIcon').html('<i class="fa fa-paper-plane"></i>');
                    $("#sendEmailBtn").attr({"disabled":"disabled"});
                }
            }
        }

        function check() {
            var code = $('#inputCode').val();
            var email = $('#inputEmail').val();
            $.get("/email/checkCode?email=" + email + "&code=" + code, function (data) {
                msg  = data.msg;
                // $("#returnMsg").html(msg);
                // alert("信息是："+msg+"，当前code为："+code);
                if(msg==="校验成功"){
                    clearInterval(countDownFun);
                    sendEmailLimited = 30;
                    $('#sendEmailBtn').removeClass("btn-primary btn-info btn-danger").addClass("btn-success");
                    $('#sendEmailIcon').html('<i class="fa fa-check-square"></i>');
                    $("#sendEmailBtn").attr({"disabled":"disabled"});
                    $("#returnMsg").html("验证通过");
                }
                else if(msg==="邮箱与验证码不匹配"){
                    $('#sendEmailBtn').removeClass("btn-primary btn-info btn-success").addClass("btn-danger").removeAttr("disabled");
                    $('#sendEmailIcon').html('<i class="fa fa-window-close"></i>');
                    $("#returnMsg").html("验证失败！重新发送？");
                }
                else if(msg==="该邮箱已注册"){
                    $('#sendEmailBtn').removeClass("btn-primary btn-info btn-success").addClass("btn-danger").removeAttr("disabled");
                    $('#sendEmailIcon').html('<i class="fa fa-window-close"></i>');
                    $("#returnMsg").html("该邮箱已注册，请更换或直接登录");
                }
            });
        }
    </script>
</body>

</html>